<template>
  <div class="h-100 bgi">
    <el-container>
      <el-header>
        <div class="font-header">滦州市智慧化工园区重大危险源动态监测平台</div>
        <div class="font-header-sub">
          天气：
          <span>晴</span>
          最高温度
          <span>9°C</span>
          最低温度
          <span>-5°C</span>
          时间
          <span>2019-12-03 16:05</span>
        </div>
      </el-header>
      <el-main class="con-h">
        <el-row class="con-h">
          <el-col :span="6" class="h-100">
            <div class="static-info">
              <div class="info-con">
                <h2>静态信息»</h2>
                <div class="tit-bg m-t-10">视频信息</div>                
                <div id="look-video">
                  <embed src="http://www.ckplayer.com/ckplayer/x/ckplayer.swf" 
                flashvars="rtmp://rtmp01open.ys7.com/openlive/85ea0cd999774ac8b3635fa103668ab0"  quality="high" width="100%" height="100%" 
                align="middle" allowScriptAccess="always" allowFullscreen="true" type="application/x-shockwave-flash"></embed>
                </div>
                <!-- <table class="info-table m-t-10">
                  <tr>
                    <td class="table-title">设备名称：</td>
                    <td>锻压机01</td>
                  </tr>
                  <tr>
                    <td class="table-title">设备ID：</td>
                    <td>01</td>
                  </tr>
                  <tr>
                    <td class="table-title">设备状态：</td>
                    <td>正常运行</td>
                  </tr>
                  <tr>
                    <td class="table-title">设备场址：</td>
                    <td>滦州市化工园</td>
                  </tr>
                  <tr>
                    <td class="table-title">设备管理人：</td>
                    <td>爪爪</td>
                  </tr>
                  <tr>
                    <td class="table-title">管理人电话：</td>
                    <td>15123456798</td>
                  </tr>
                </table> -->
                <div class="tit-bg m-t-10">历史数据</div>
                <el-row>
                  <el-col :span="12" :offset="12">
                    <el-select size="mini" v-model="NumCensus" class="num-census">
                  <el-option
                    v-for="item in NumCensusOpt"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                  </el-col>
                </el-row>
                <div id="his-charts"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="h-100">
            <map-view class="map-con"></map-view>
            <div class="go-page">
              <el-button @click="GoPage">进入系统</el-button>
            </div>
          </el-col>
          <el-col :span="6" class="h-100">
            <div class="live-info">
              <div class="info-con">
                <h2>动态信息»</h2>
                <div class="tit-bg m-t-10">锻压机A-01</div>
                <el-row :gutter="10">
                  <el-col :span="8" v-for="(item,index) in LiveUrl" :key="index" class="m-t-10 live-img">
                    <el-image :src="item.url"></el-image>
                    <div class="live-title">
                      <span v-text="item.num+item.unit"></span>                      
                    </div>
                    <div class="live-content" v-text="item.title"></div>
                  </el-col>
                </el-row>
                <div class="tit-bg m-t-10">报警数据</div>
                <table-list :table="TableData"></table-list>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import MapView from "@/components/map/map";
import TableList from '@/components/Table/TableList'
import DataList from '@/utils/index'
export default {
  components: {
    MapView,
    TableList
  },
  data() {
    return {
      TableData:DataList.table,
      LiveUrl:[
        {
          url:require("../../assets/image/a (3).png"),
          title:'日加工',
          num:100000,
          unit:'个'
        },
        {
          url:require("../../assets/image/a (8).png"),
          title:'用水量',
          num:42,
          unit:'t'
        },
        {
          url:require("../../assets/image/a (7).png"),
          title:'用电量',
          num:120,
          unit:'kw/h'
        },
        {
          url:require("../../assets/image/a (1).png"),
          title:'电流',
          num:50,
          unit:'A'
        },
        {
          url:require("../../assets/image/a (2).png"),
          title:'电压',
          num:20,
          unit:'V'
        },
        {
          url:require("../../assets/image/a (6).png"),
          title:'压力',
          num:630,
          unit:'Kpa'
        }
      ],
      NumCensusOpt:[
        {
          value:0,
          label:'加工数量统计'
        },
        {
          value:1,
          label:'加工数量统计1'
        },
      ],
      NumCensus:null,
      companyId:sessionStorage.getItem('companyId')
    };
  },
  created() {
    
  },
  mounted () {
    this.GetHisList()    
    this.GetAlarmList()
  },
  methods: {
    // 进入系统
    GoPage(){
      // console.log(this.$router);
      
      this.$router.push({ path: "/Index" });
    },
    // 报警数据
    GetAlarmList(){      
      // 获取数据
      let params = {
        pageNo:1,
        pageSize:1000,
        companyId: this.companyId
      }
      this.$api.alarm.ALARMLIST(params)
        .then(res => {
          this.TableData.data = res.data  
        })
        .catch(() => {
          this.$message({
            message: "暂无数据",
            type: "error"
          });
        });
    
    },
    // 获取历史数据
    GetHisList(){
      let option = {
        backgroundColor: "",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "3%",
          containLabel: true
        },
        xAxis: [
          {
            // type: "category",
            axisLabel: {
              interval: 0,
              rotate: 40,
              textStyle: {
                color: "#fff"
              }
            },
            data: [
              "周一",            
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: "7",
            axisLine: {
              /*坐标轴，轴线的设置*/
              lineStyle: {
                color: "rgb(12,51,102)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgb(12,51,102)"
              }
            },
            axisLabel: {
              /*坐标轴的刻度文字设置*/
              formatter: "{value}",
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        series: [
          {
            type: "bar",
            barWidth: "30",
            data: [256],
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgb(28,150,251)"
                  },
                  {
                    offset: 1,
                    color: "rgb(12,51,102)"
                  }
                ])
              }
            },
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "rgba(113,237,255,1)",
                fontSize: "18"
              }
            }
          }
        ]
      };
        this.DrawEcharts("his-charts", option);
    },
    // 绘制echarts图
    DrawEcharts(ID, option) {
      let MyChart = this.$echarts.init(document.getElementById(ID));
      MyChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/style/OverAll.scss";
.bgi {
  background: url("../../assets/image/IndexBg.jpg") no-repeat;
  background-size: 100% 100%;
}
.el-container {
  .el-header {
    height: 120px !important;
    @extend .t-c;
    @extend .font-cor-fff;
    .font-header {
      font-size: 36px;
      line-height: 96px;      
      color: #1ecaf8;
    }
    .font-header-sub {
      position: relative;
      z-index: 100;
      color: #11a1fa;
      line-height: 26px;
    }
  }
  @extend .h-100;
  .el-main {
    padding: 0;
    // background: rgb(35, 155, 135);
  }
}
.con-h {
  @extend .font-cor-fff;
  height: 90%;
  // 地图logo
  /deep/.BMap_cpyCtrl {
    display: none;
  }
  /deep/.anchorBL {
    display: none;
  }
  // 地图组件样式
  .map-con {
    @extend .h-100;
  }
  .go-page{
    @extend .t-c;
    .el-button{
      background: url("../../assets/image/button.png") no-repeat;
      background-size: 100% 100%;
      border: none;
      height: 80px;
      width: 200px;
      font-size: 30px;
      color: rgb(25, 203, 249);
      position: relative;
      top: -60px;
    }
  }
  // 左侧静态信息
  .static-info {
    @extend .h-100;
    width: 80%;
    background: url("../../assets/image/a (9).png") no-repeat;
    background-size:100% 100%; 
    margin: 0 auto;
    // 视频窗口
    #look-video{
      height: 260px;
      width: 100%;
    }
    .info-con {
      @extend .h-100;
      width: 90%;
      margin: 0 auto;
      // background: rgb(84, 194, 103);
      h2 {
        padding-top: 30px;
      }
      .tit-bg {
        background:url("../../assets/image/title.png");
        padding: 5px 0 5px 20px;
      }
    }
    // 表格样式
    .info-table{
      @extend .w-100;
      td{
        background: #041A49;
        padding: 10px 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .table-title{
        width: 26%
      }
    }
    .num-census{
      @extend .m-b-10;
      /deep/ .el-input__inner{
        background: url("../../assets/image/a (5).png") no-repeat;
        background-size: 100% 100%;
        border: none;
        color: #ffffff;
      }      
    }
    #his-charts{
      @extend .w-100;
      height: 330px;
    }
  }
  // 动态信息
  .live-info{
    @extend .static-info;
    .info-con{
      .live-img{
        @extend .t-c;
        position: relative;
        .live-title{
          position: absolute;
          top: 50px;
          width: 90%
        }
      }      
    }
  }
}
</style>